<template>
  <div class="login">
    <div class="bg"></div>
    <div class="panel">
      <div class="login-title">
        <span>一拼通车队管理系统</span>
      </div>
      <el-form :model="loginForm" ref="loginForm" size="medium">
        <el-form-item
          prop="un"
          :rules="[
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ]">
          <el-input v-model="loginForm.un" type="text" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item
          prop="pw"
          :rules="[
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]">
          <el-input v-model="loginForm.pw" type="password" placeholder="密码"></el-input>
        </el-form-item>
        <!--<el-form-item class="login-el-form-item">-->
          <!--<el-checkbox label="记住密码" name="type" v-model="rememberPwd"></el-checkbox>-->
          <!--<span @click="fpVisible=true" class="forget-pas el-checkbox__label">忘记密码？</span>-->
        <!--</el-form-item>-->
        <el-form-item>
          <el-button @click="login" class="login-btn" type="primary">登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      <div>&nbsp;</div>
      <div>
        <span>上海宏申信息科技有限公司</span>
        <a href="http://www.miitbeian.gov.cn/ " target="_blank">沪ICP备14044508号-4</a>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import { mapActions } from 'vuex'

  @Component({
    name: 'Login',
    components: {},
    methods: {
      ...mapActions({
        userLogin: 'user/login'
      })
    }
  })

  export default class Login extends Vue {
    loginForm = {
      client_id: 'ngAuthApp',
      un: '',
      pw: ''
    }

    login () {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          this.userLogin(this.loginForm)
        } else {
          return false
        }
      })
    }

  }
</script>

<style lang="scss" scoped>
  .login{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    .forget-pas{
      color: #606266;
      cursor: pointer;
      margin-left: 130px;
    }
    .footer{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60px;
      z-index: 1;
      color: #eaeaea;
      text-align: center;
      a{
        text-decoration: none;
        color: #eaeaea;
        margin-left: 50px;
      }
    }
    .login-title{
      position: absolute;
      height: 60px;
      line-height: 60px;
      top: -60px;
      width: 100%;
      left: 0;
      text-align: center;
      > * {
        vertical-align: middle;
      }
      img{
        width: 40px;
        height: 40px;
      }
      span{
        color: #337ab7;
        font-size: 22px;
        font-weight: bolder;
        margin-left: 5px;
      }
    }
    .login-btn{
      width: 100%;
      font-size: 20px;
    }
    .bg{
      width: 100%;
      height: 100%;
      background: url("../../../public/images/login_bg.jpg") center no-repeat;
      background-size: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
    .panel{
      padding: 30px 20px;
      width: 300px;
      height: 215px;
      background: rgba(255,255,255,.8);
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
      box-shadow: 0 9px 20px #00000069;
      position: absolute;
      z-index: 9;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  }
</style>